import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Link,
  Switch,
  Route
} from 'react-router-dom'

const routes = [
  {
    path: '/movie',
    label: 'movie',
    component: () => {
      return (
        <div>movie</div>
      )
    }
  },
  {
    path: '/theater',
    label: 'theater',
    component: (props) => {
      return (
        <>
          <h1>theater</h1>
          <ul>
            <li><Link to="/theater/beijing">beijing</Link></li>
            <li><Link to="/theater/shanghai">shanghai</Link></li>
          </ul>
          {
            props.routes.map(route => {
              return (
                <ChildComponent
                  key={route.label}
                  {...route}
                ></ChildComponent>
              )
            })
          }
        </>
      )
    },
    routes: [
      {
        path: '/theater/beijing',
        label: 'beijing',
        component: () => {
          return (
            <div>beijing</div>
          )
        }
      },
      {
        path: '/theater/shanghai',
        label: 'shanghai',
        component: () => {
          return (
            <div>shanghai</div>
          )
        }
      }
    ]
  }
]

const ChildComponent = props => {
  const { path } = props
  return (
    <Switch>
      <Route
        path={path}
      >
        <props.component {...props}></props.component>
      </Route>
    </Switch>
  )
}

export default class AppConfig extends Component {
  render() {
    return (
      <Router>
        <ul>
          {
            routes.map(route => {
              return (
                <li key={route.path}>
                  <Link to={route.path}>{route.label}</Link>
                </li>
              )
            })
          }
        </ul>
        {
          routes.map(route => {
            return (
              <ChildComponent
                key={route.label}
                {...route}
              ></ChildComponent>
            )
          })
        }
      </Router>
    )
  }
}